<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子布局</title>
    <!-- 
        弹性盒子布局
            概念:
               1. 容器
               2. 项目元素
               3. 主轴
               4. 交叉轴 
    
            容器样式
               1. 项目元素沿主轴对齐方式
                   justify-content: start;
               2. 项目元素沿交叉轴对齐方式
                    align-items: start;
               3. 改变主轴方向
                    flex-direction: row; //row默认值水平方向   
                4. 设置多出的项目元素换行显示，默认不换行 
                      flex-wrap: wrap;
            项目元素样式
               flex-grow:0;
                  设置项目元素在剩余空间的占比

                flex-shrink:1
                  设置项目元素超出容器空间时的表现
                   默认压缩
                
    -->
    <style>
        .g-container{
            /* 表示 1. 当前标签元素设置成为弹性盒子容器, 
                    2. 里面的元素称为项目元素
                    3.  盒子主轴默认水平方向，
                    4. 垂直方向成为交叉轴
                
                 项目元素沿水平主轴排列，项目元素具有行块元素特性
            */
            display: flex;

            width: 500px;
            height: 400px;
            border: 1px solid blue;

            justify-content: start;
            align-items: start;

            /* 改变主轴为垂直方向 */
            flex-direction: row;

            /* 设置多出的项目元素换行显示，默认不换行 */
            flex-wrap: wrap;

        }

        .g-container div{
            width: 100px;
            height: 100px;
            border: 1px solid red;


            flex-shrink: 0;
        }

        .g-container .box1{
            /* flex-grow: 1; */
            /* flex-basis: 50px; */
            
        }

        .g-container .box2{
            /* flex-grow: 1; */
        }
        .g-container .box3{
            /* flex-grow: 1; */
        }

    </style>
</head>
<body>
    <div class="g-container">
        <div class="box1">盒子一</div>
        <div class="box2">盒子二</div>
        <div class="box3">盒子三</div>
        <div class="box4">盒子四</div>
        <div class="box5">盒子五</div>
        <div class="box6">盒子六</div>
    </div>
</body>
</html>